<template>
  <div>
    <el-form label-width="80px" :model="game" :rules="rules" ref="ruleForm">
      <el-form-item label="游戏名称">
        <el-input placeholder="游戏名称" v-model="game.name"></el-input>
      </el-form-item>
      <el-form-item label="分类">
        <el-select placeholder="请选择分类" v-model="game.gametype">
          <el-option
            v-for="(type, index) in typeList"
            :label="type.typename"
            :value="type.id"
            :key="type.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input
          placeholder="价格(元)"
          v-model="game.previousmoney"
        ></el-input>
      </el-form-item>
      <el-form-item label="游戏介绍">
        <el-input
          type="textarea"
          placeholder="介绍"
          rows="4"
          v-model="game.introduce"
        ></el-input>
      </el-form-item>

      <el-form-item label="游戏图片" label-width="100px">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/api/upLoadPage"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="game.page" :src="game.page" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="addGame('ruleForm')">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "AddGame",
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      attrId: "",
      game: {
        name: "",
        introduce: "",
        gametype: "",
        previousmoney: 0,
        page: "",
      },
      pageUrl: "",
      typeList: [
        { id: "0", typename: "动作" },
        { id: "1", typename: "射击" },
        { id: "2", typename: "策略" },
        { id: "3", typename: "冒险" },
        { id: "4", typename: "竞速" },
        { id: "5", typename: "角色扮演" },
      ],
      rules: {
        name: [{ required: true, message: "请输入游戏名称" }],
        introduce: [{ required: true, message: "请输入游戏介绍" }],
        gametype: [{ required: true, message: "请选择游戏类型" }],
        previousmoney: [{ required: true, message: "请输入游戏价格" }],
        page: [{ required: true, message: "请选择图片" }],
      },
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      // res 上传成功之后返回前端数据
      // file 上传成功之后服务器返回前端数据
      this.game.page = URL.createObjectURL(file.raw);
      this.pageUrl = file.response.data.src;
    },
    // 图片上传之前
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isJPG2 = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      if (!isJPG && !isJPG2 && !isPNG)
        this.$message.error("请上传格式为 png, jpg, jpeg 的图片！");

      return isJPG || isJPG2 || isPNG;
    },
    // 点击取消返回游戏列表
    cancel() {
      this.$emit("changeTable", 0);
      // assign是es6的合并方法，this._data会获得响应式数据data，而option是配置对象
      // 这一步实现了清空数据
      Object.assign(this._data, this.$options.data());
    },
    // 添加游戏
    async addGame(formName) {
      this.game.page = this.pageUrl;
      for (var i = 0; i < this.typeList.length; i++) {
        if (this.game.gametype == i) {
          this.game.gametype = this.typeList[i].typename;
        }
      }
      let res = await this.$API.game.reqAddGame(this.game);
      if (res.code == 200) {
        this.$message.success("上新成功");
        this.$emit("changeTable", 0);
      }
      // 上传成功也需要清除数据
      Object.assign(this._data, this.$options.data());
    },
  },
  computed: {},
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
